<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<!-- 设备部重点工作页面 -->
<head>
    <meta charset="UTF-8">
    <title>马钢股份组织绩效</title>
    <link href="../static/css/todostyle.css" rel="stylesheet" th:href="@{/css/todostyle.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}"/>
    <link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-treetable/bootstrap-treetable.css}"/>
    <link rel="stylesheet"
          th:href="@{/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.css}"/>
    <link rel="stylesheet" th:href="@{/css/animate.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/ajax/libs/select/select2.css}"/>
    <link rel="stylesheet" th:href="@{/ruoyi/css/ry-ui.css}"/>
</head>
<style>
    #table tbody tr:nth-child(even) {
        background: #E1F9FF;
    }

    .import {
        margin: 10px 50px 0 0 ! important;
    }

    #table th {
        width: 100px;
    }

    #table td {
        overflow: hidden; /*  white-space: nowrap; */
        text-overflow: ellipsis;
        font-size: 15px
    }

    /* #table td:hover ~ td{overflow: visible;  white-space: normal;}
    #table td:hover{overflow: visible;   white-space: normal;} */
    .detail {
        width: 5px !important;
    }
</style>
<body>
<div class="Top_mg"></div>

<div class="evaluate">
    <div class="evaluate_a row ">
        <input id="notTitle" th:value="${pefassproject.noticeTitle}" type="hidden"/>
        <input id="notValue" th:value="${pefassproject.noticeValue}" type="hidden"/>
        <input id="typeYB" th:value="${type}" type="hidden"/>
        <div aria-hidden="true" class="modal inmodal fade" id="tips_b"
             role="dialog" style="display: none;" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 th:text="${pefassproject.noticeTitle}"></h3>
                    </div>
                    <div class="modal-body">
                        <p id="noticeValue" style="white-space:pre-line;padding: 17px 35px;"></p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-white" data-dismiss="modal" type="button">好的，知道了</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="tou tou2">
                <i class="glyphicon glyphicon-list-alt" id="hei_mg"></i>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <h2 th:text="${title}"></h2>
                <!-- &nbsp;&nbsp;&nbsp;&nbsp;
                <i class="fa fa-clock-o"></i>&nbsp;&nbsp;<span th:text="${#dates.format(pefassproject.assessTimeFrom, 'yyyy-MM-dd')}"></span>····<span th:text="${#dates.format(pefassproject.assessTimeTo, 'yyyy-MM-dd')}"></span>
                <div  th:if="${days>=0}" class="sy">剩余<span th:text="${days}"></span>天</div>
                <div  th:if="${days<0}" class="sy"><span>已过期</span></div> -->
            </div>
            <br>
            <div class="tou2">
            </div>
        </div>

        <ul class="ul1">
            <li><span class="spans">工作内容：</span><span th:text="${pefctasstable.memberName}"></span></li>
            <li><span class="spans">责任人：</span><span th:text="${leader}"></span></li>
        </ul>
        <!-- <ul class="ul2_mg">
            <li><span class="spans">展现形式：</span><span th:text = "${pefassproject.showtype}"></span></li>
            <li><span class="spans">考核周期：</span><span th:text = "${@dict.getLabel('zzjx_pefindicator_checkcyc', pefassproject.cycleValue)}"></span></li>
        </ul> -->

    </div>
    <form class="form-horizontal m" id="form-kaoping">
        <input id="leader" name="leader" th:value="${leader}" type="hidden">
        <input id="id" name="id" th:value="${approver.id}" type="hidden">
        <input id="loginUser" name="loginUser" th:value="${approver.approverCode}" type="hidden">
        <input id="tableId" name="tableId" th:value="${approver.tableId}" type="hidden">
        <input id="approveorder" name="approveorder" th:value="${approver.approveorder}" type="hidden">
    </form>

    <div class="evaluate_c table2excel" id="tableDiv" style="width: 98%;padding-left:2%;">
        <form id="formTable">
            <table data-mobile-responsive="true" id="table">
                <!-- 在此处填充表格数据 -->
            </table>
        </form>
    </div>
    <div class="evaluate_b_but" style="margin: 20px 0 50px 0;text-align: center;">

        <button onclick="doSubmit('BC')" th:if="${type!=1}">保存</button>
        <button onclick="doSubmit('TJ')" th:if="${type!=1}">提交</button>
        <button onclick="closeItem()">取消</button>

    </div>

</div>

<div th:include="include :: footer"></div>

<script th:src="@{/ajax/libs/bootstrap-table/extensions/export/export.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/export/xlsx.full.min.js}"></script>
<script th:src="@{/ajax/libs/table2excel/jquery.table2excel.js}"></script>
<script charset="UTF-8" th:src="@{/js/rule.js}" type="text/javascript"></script>
<!-- jquery-validate 表单验证插件 -->
<script th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script th:src="@{/ajax/libs/validate/jquery.validate.extend.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "zzjx/pefctasstable";
    var loginUser = $("#loginUser").val();
    var leader = $("#leader").val(); //最高级审核人
    $(function () {
        var tipsTitle = $("#notTitle").val();
        var tipsValue = $("#notValue").val();
        if (tipsTitle != "" && tipsTitle != null && tipsValue != "" && tipsValue != null) {
            $("#noticeValue").html(tipsValue.replace(/<br>/g, ""));
            $("#tips_b").modal("show");
            setTimeout(function () {
                $("#tips_b").modal("hide");
            }, 15000);
        }
        doChange(); //初始化表格信息
        $.modal.closeLoading();
    })

    /**
     * 提交按钮
     * @param submitType 提交类型，是保存还是提交 TJ：提交 BC：保存
     */
    function doSubmit(submitType) {
        var data = $("#form-kaoping").serializeArray();
        data.push({"name": "submitType", "value": submitType});
        data.push({"name": "tableDataJson", "value": JSON.stringify($("#table").bootstrapTable('getData'))});
        $.operate.saveTab(ctx + "zzjx/approver/doSubmit", data);
    }


    var formulaMap = null; //公式
    var dictData = null;	//表头 rule.js需要用到这两个，一定要声明为全局变量
    /**
     * 更改模板，重新加载预览信息
     * @returns {boolean}
     */
    function doChange() {
        var id = $("#id").val();
        var tableId = $("#tableId").val(); //表单id
        if (tableId != "") {
            $.modal.loading("请等待加载预览信息!");
            $.ajax({
                url: ctx + "zzjx/pefctasstable/preview"
                , data: {"tableId": tableId, "id": id, "time": (new Date()).getTime()}
                , dataType: "JSON"
                , type: "GET"
                , async: false
                , success: function (result) {
                    $.table.destroy("table");
                    dictData = result.dictData;

                    formulaMap = result.formulaMap;
                    var list = result.list;
                    list = getNeedData(list);//过滤数据
                    buildTable($('#table'), dictData.length, list.length, dictData, list, true, null);
                    $.modal.closeLoading();
                }, error: function () {
                    $.modal.closeLoading();
                    $.modal.alertError("获取预览信息失败!");
                }
            })
            $("#tableDiv").removeClass("hidden");
            return false;
        }
        $("#tableDiv").addClass("hidden");
    }


    /**
     * 构建预览信息表格
     * @param $el
     * @param cells
     * @param rows
     * @param dictData
     * @param list
     * @param isHome //是否为主表
     * @param rowId //加载子表时点击的父ID
     */
    function buildTable($el, cells, rows, dictData, list, isHome, rowId) {
        var roleId = $("#roleId").val();
        var i, j, row, columns = [], data = [];
        var isDisabled = false;
        if ($("#typeYB").val() == 1) {
            isDisabled = true;
        }
        columns.push({
            field: "id",
            title: "ID",
            visible: false
        })

        columns.push({
            field: "creater",
            title: "创建人",
            visible: false
        })


        //拼接table,拼接表头
        for (var dd in dictData) {
            var dictLabel = dictData[dd]["dictLabel"];//显示名称
            var dictValue = dictData[dd]["dictValue"];//字段值
            var listClass = dictData[dd]["listClass"];//列显示类型(输入框，下拉框，显示)
            var isMustFill = dictData[dd]["isMustFill"];//是否为空
            var fillRoleIds = dictData[dd]["fillRoleIds"];//可评角色ID
            var selfWidth = dictData[dd]["described"];//自定义宽度
            var f = {
                field: dictValue,
                title: dictLabel,
                sortable: false
            }
            //主表不进行渲染输入框之类的东西
            if (!isHome) {
                var opt = {
                    dictLabel: dictLabel,	//必填
                    dictValue: dictValue,	//必填
                    tableId: "'" + rowId + "'",		//必填
                    ruleId: listClass,		//必填
                    align: "center",
                    halign: "center",
                    roleId: roleId,			//必填
                    isMustFill: isMustFill,	//必填
                    isDisabled: isDisabled,
                    fillRoleIds: fillRoleIds,//必填
                    formId: "formTable",		//必填
                    selfWidth: selfWidth,

                };
                f = $.rule.fmRule(opt);
            }


            if ("checkcyc" == dictValue) {//考核周期
                f = {
                    field: dictValue,
                    title: dictLabel,
                    sortable: false,
                    align: "center",
                    formatter: function (value, row, index) {
                        return value == null ? "-" : $.table.selectDictLabel([[${@dict.getType('zzjx_pefindicator_checkcyc')}]], value);
                    }
                }
            }
            if ("indPercents" == dictValue) {//权重
                f = {
                    field: dictValue,
                    title: dictLabel,
                    sortable: false,
                    visible: true,
                    align: "center",
                    formatter: function (value, row, index) {
                        return value == null || value == "" ? 0 + "%" : value + "%";
                    }
                }
            }

            if ("principal" == dictValue) {//责任人
                f = {
                    field: dictValue,
                    title: dictLabel,
                    sortable: false,
                    visible: true,
                    align: "center",
                    formatter: function (value, row, index) {
                        return getUserName(value);
                    }
                }
            }

            if (!isHome && "creater" == dictValue) { //填报人
                f = {
                    field: dictValue,
                    title: dictLabel,
                    sortable: false,
                    visible: true,
                    align: "center",
                    formatter: function (value, row, index) {
                        return getUserName(value);
                    }
                }
                columns.push(f);
                continue;
            } else if (isHome && "creater" == dictValue) {
                continue;
            }


            if (!isHome && "createDate" == dictValue) { //创建时间
                columns.push(f);
                continue;
            } else if (isHome && "createDate" == dictValue) {
                continue;
            }


            if (isHome && dictValue.indexOf("target") == -1) {
                columns.push(f);
            } else if (!isHome && dictValue.indexOf("target") != -1) {
                columns.push(f);
            }


        }

        columns.push(
            {
                field: "scoringMethod",
                title: "公式ID",
                visible: false,
            }
        );
        if (isHome) {
            columns.push(
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="#" onclick="parentTableClick(this)"><i class="fa fa-edit"></i>填报</a> ');
                        return actions.join('');
                    }
                }
            );


            $el.bootstrapTable('destroy').bootstrapTable({
                columns: columns,
                data: $.rule.fmList(dictData, list),
                search: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                showExport: false,                     //是否显示导出
                exportDataType: "basic",              //basic', 'all', 'selected'.
                height: 600,
                pagination: false,
                modalName: "考核指标",
                detailView: true,
                onExpandRow: function (index, row, $detail) {
                    initChildTable(index, row, $detail);
                },
                onPostBody: function (data) {

                }
            });
        } else {

            columns.push(
                {
                    title: '操作',
                    align: 'center',
                    width: '23px',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (row.creater == loginUser || row.creater == undefined || loginUser == leader) {
                            actions.push('<a class="btn btn-success btn-xs" href="#" onclick="childTableClick(\'' + rowId + '\',\'' + index + '\')"><i class="fa fa-edit"></i>保存</a> ');
                        }
                        return actions.join('');
                    }
                }
            );

            $el.bootstrapTable('destroy').bootstrapTable({
                columns: columns,
                data: $.rule.fmList(dictData, list),
                search: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                showExport: false,                     //是否显示导出
                exportDataType: "basic",              //basic', 'all', 'selected'.
                pagination: false,
                modalName: "考核指标",
                sidePagination: "server",
                contentType: "application/x-www-form-urlencoded",
                onPostBody: function (data) {

                }
            });
        }


    }


    //得到表的数据
    function getDate() {
        alert(JSON.stringify($("#table").bootstrapTable('getData')));
    }


    //弹出层提示公告
    function alterTips() {
        var tips = $("#noticeTitle").val();
        var noticeValue = $("#noticeValue").text();
        debugger
        if (tips.length > 0) {
            layer.open({
                area: ['700px', '450px'],
                title: "公告标题：" + tips,
                content: noticeValue
            });
        }
    }

    //加载子表
    initChildTable = function (index, row, $detail) {
        var id = $("#id").val();
        var rowId = row.id;
        var childTable = $detail.html('<table style="" id="' + rowId + '"></table>').find('table');
        $.ajax({
            url: ctx + "zzjx/pefctasstable/getTableChild"
            , data: {"parentId": row.id, "time": (new Date()).getTime()}
            , dataType: "JSON"
            , type: "GET"
            , async: false
            , success: function (result) {
                var list = result;
                list.push({id: "newRow"});//构建一行空数据，用来让用户填写
                buildTable($(childTable), dictData.length, list.length, dictData, list, false, rowId);
                $.modal.closeLoading();
            }, error: function () {
                $.modal.closeLoading();
                $.modal.alertError("获取预览信息失败!");
            }
        });

    };

    //父表格填报按钮
    parentTableClick = function (that) {
        $(that).parent().siblings(":first").find("a").click();
    }


    childTableClick = function (parentId, index) {
        var row = $("#" + parentId + "").bootstrapTable('getOptions').data[index];
        row.parentId = parentId;
        if (!$.rule.checkTableRequired(parentId)) {
            $.modal.alertError("请将信息填写完整后提交!");
            return;
        }
        $.modal.loading();
        $.ajax({
            url: ctx + "zzjx/pefctasstable/setTableChild"
            , data: {"rowJson": JSON.stringify(row), "time": (new Date()).getTime()}
            , dataType: "JSON"
            , type: "POST"
            , async: false
            , success: function (result) {
                //重新加载子元素
                $("#" + parentId).parent().parent().parent().parent().parent().prev().children("td:first").find("a").click().click();
                $.modal.alertSuccess("保存成功！");
                $.modal.closeLoading();
            }, error: function () {
                $.modal.closeLoading();
                $.modal.alertError("保存失败！");
            }
        });

    }

    var userNames = {};//用来存已查询的用户信息，优化加载速度
    //查询责任人
    function getUserName(loginName) {

        if (loginName == undefined) {
            return;
        }
        var loginNames = loginName.split(',');

        var nameArray = new Array();

        for (var i = 0; i < loginNames.length; i++) {

            var name = loginNames[i];

            if (userNames[name] == undefined) {
                userNames[name] = $.ajax({
                    url: "/system/user/getUserNameByLoginName?loginName=" + name,
                    async: false
                }).responseText;
            }
            nameArray[i] = userNames[name];
        }

        return nameArray.toString();
    }

    //筛选需要的数据
    function getNeedData(data) {
        var tempData = [];
        if (leader == loginUser) {
            return data;
        }
        var index = 0;
        for (var i in data) {
            if (data[i].principal.indexOf(loginUser) != -1) {
                tempData[index++] = data[i];
            }
        }
        return tempData;
    }

    //筛选需要的数据
    function getNeedData(data) {
        var tempData = [];
        if (leader == loginUser) {
            return data;
        }
        var index = 0;
        for (var i in data) {
            if (data[i].principal.indexOf(loginUser) != -1) {
                tempData[index++] = data[i];
            }
        }
        return tempData;
    }


</script>
</body>
</html>
